<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input type="text" class="search-input" placeholder="输入会员手机号" v-model="searchQuery" @input="onSearch" />
			<view class="search-icon" @click="onSearchClick">
				<text>🔍</text>
			</view>
		</view>

		<!-- 会员列表 -->
		<view v-for="(member, index) in filteredMembers" :key="index" class="member-card">
			<!-- 同一行展示昵称和门店余额 -->
			<view class="info-row">
				<text class="nickname">昵称：{{ member.nickname }}</text>
				<text class="balance">门店余额：{{ member.balance }}</text>
			</view>
			<!-- 第二行展示手机号和总消费 -->
			<view class="info-row">
				<text class="phone">手机号：{{ member.mobile ? member.mobile : '暂无手机号' }}</text>
				<text class="total-spent">总消费：{{ member.total_consume }}</text>
			</view>
			<!-- 第三行展示注册时间和总充值 -->
			<view class="info-row">
				<text class="join-time">注册时间：{{ member.jointime }}</text>
				<text class="total-recharge">总充值：{{ member.total_recharge }}</text>
			</view>
			<!-- 第四行展示打球时长和“设为管理”按钮 -->
			<view class="info-row">
			  <text class="total-duration">打球时长：{{ member.total_duration }} h</text>
			  <button class="set-admin-btn" @click="setAdmin(member)">
			    <text v-if="member.store_id === 0">设为管理员</text>
			    <text v-else>取消管理员</text>
			  </button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchQuery: "", // 搜索内容
				members: [], // 会员列表
				filteredMembers: [], // 筛选后的会员数据
			};
		},
		mounted() {
			// 页面加载时调用API获取会员数据
			this.loadMembers();
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
		},
		methods: {
			// 加载会员数据
			loadMembers() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.$api.post({
						url: '/member/lists',
						loadingTip: '加载中...',
						data: {
							store_id: store_id, // 根据实际情况传递门店ID
						},
						success: (res) => {
							uni.stopPullDownRefresh();
							this.members = res; // 假设返回的data为会员数据
							this.filteredMembers = this.members; // 初始化时显示所有会员
							console.log('会员数据：', this.members);
						},
						fail: () => {
							uni.showToast({
								title: '加载失败，请重试',
								icon: 'none',
							});
						},
					});
				});
			},

			// 搜索功能
			onSearch() {
				const query = this.searchQuery.trim();
				if (query) {
					// 根据手机号进行筛选
					this.filteredMembers = this.members.filter((member) =>
						member.mobile.includes(query)
					);
				} else {
					// 如果没有搜索内容，则显示所有会员
					this.filteredMembers = this.members;
				}
			},

			// 搜索按钮触发
			onSearchClick() {
				this.onSearch();
			},

			setAdmin(member) {
			  const action = member.store_id === 0 ? '设为管理员' : '取消管理员';
			  const confirmationMessage = member.store_id === 0
			    ? `确定要将 ${member.nickname} 设为管理员吗？`
			    : `确定要取消 ${member.nickname} 的管理员权限吗？`;
			
			  uni.showModal({
			    title: "确认操作",
			    content: confirmationMessage,
			    success: (res) => {
			      if (res.confirm) {
			        // 根据store_id的值决定调用哪个接口
			        this.$xyfun.userStoreId().then((store_id) => {
			          const url = member.store_id === 0 ? '/user/setManager' : '/user/removeManager'; // 假设有取消管理员的接口
			          this.$api.post({
			            url: url, // 后端接口地址
			            data: {
			              user_id: member.id,
			              store_id: store_id,
			            },
			            success: (res) => {
			              if (res === 0) {
			                uni.showToast({
			                  title: '已是管理员',
			                  icon: 'none',
			                });
			              } else {
			                const successMessage = member.store_id === 0
			                  ? "设置成功"
			                  : "取消成功";
			
			                uni.showToast({
			                  title: successMessage,
			                  icon: "success",
			                  duration: 2000,
			                });
			
			                // 更新本地数据
			                member.isAdmin = member.store_id === 0;
			                member.store_id = member.store_id === 0 ? store_id : 0; // 更新 store_id
			                this.$set(this.filteredMembers, this.filteredMembers.indexOf(member), member);
			              }
			            },
			            fail: (res) => {
			              uni.showToast({
			                title: '操作失败，请重试',
			                icon: 'none',
			              });
			            },
			          });
			        });
			      }
			    },
			  });
			},

			
		},
	};
</script>

<style>
	.container {
		padding: 10px;
		background-color: #f5f5f5;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin: 10px 0;
		background-color: #ffffff;
		border-radius: 5px;
		padding: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.search-input {
		flex: 1;
		padding: 5px;
		font-size: 16px;
		border: none;
		outline: none;
	}

	.search-icon {
		width: 40px;
		text-align: center;
		font-size: 18px;
		color: #666666;
	}

	.member-card {
		background-color: #ffffff;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.set-admin-btn {
		line-height: 1;
		margin-right: 0px;
		background-color: #ffffff;
		color: black;
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 14px;
		border: none;
		outline: none;
		cursor: pointer;
		transition: background-color 0.3s, transform 0.2s;
		/* 增加过渡动画效果 */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	/* 悬停效果 */
	.set-admin-btn:hover {
		background-color: #ffffff;
		/* 悬停时背景色变深 */
		transform: translateY(-2px);
		/* 悬停时轻微上移 */
	}

	/* 点击效果 */
	.set-admin-btn:active {
		background-color: #ffffff;
		/* 点击时背景色变深 */
		transform: translateY(2px);
		/* 点击时按钮稍微下沉 */
	}
</style>